<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>
      <el-form label-width="200px" v-if="dataInfo">
        <el-row>
          <el-form-item label="分类名:">
            <span>{{ dataInfo.firstClassifyName }}</span>
            <span v-if="dataInfo.secondClassifyName">- {{ dataInfo.secondClassifyName }}</span>
            <span v-if="dataInfo.thirdClassifyName">- {{ dataInfo.thirdClassifyName }}</span>


          </el-form-item>
          <el-form-item label="标签名:">
            <span>{{ dataInfo.tagName }}</span>
          </el-form-item>
          <el-form-item label="标签图:">
            <el-image
              style="width: 150px;"
              title="点击可预览"
              :src="dataInfo.tagImage"
              alt=""
              :preview-src-list="[dataInfo.tagImage]"
            ></el-image>
          </el-form-item>


        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import TagRuleApi from "@/api/operation/tagModel";
import BusinessDepartApi from "@/api/business/depart";
import RichEditor from "../../components/RichEditor.vue";
export default {
  data() {
    return {
      dataInfo: {},
      businessServerVariants: [],
      serverClassifyName: "",
      departList: [],
      departNames: "",
      goodsHours: []
    };
  },
  components: {
    RichEditor
  },
  computed: {
    images() {
      if (this.dataInfo.businessServerImages) {
        return this.dataInfo.businessServerImages
          .filter(item => item.type == 1)
          .map(item => item.url);
      } else {
        return [];
      }
    },
    businessClassifies() {
      const val = this.dataInfo.businessClassifies || [];
      return val.map(item => item.name).join("，");
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      TagRuleApi.tagInfoInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data;
        this.goodsHours = res.data.goodsHours;
        this.getDepartList();
        let variants = res.data.businessServerVariants || [];
        variants.forEach(a => {
          if (a.variantSpecs) {
            let specs = a.variantSpecs.map(b => {
              return b.specVal;
            });
            a.specStr = specs.join(",");
          }
        });
        this.businessServerVariants = variants;
      });
    },
    getDepartList() {
      BusinessDepartApi.listMangerTree().then(res => {
        this.departList = res.data;
        this.getDepartNames();
      });
    },
    getDepartNames() {
      let arr = [];
      if (this.dataInfo.thirdDepartId) {
        arr = this.$Utils.filterTreeToArr(
          this.departList,
          { departId: this.dataInfo.thirdDepartId },
          "departId"
        );
      } else if (this.dataInfo.secondDepartId) {
        arr = this.$Utils.filterTreeToArr(
          this.departList,
          { departId: this.dataInfo.secondDepartId },
          "departId"
        );
      } else if (this.dataInfo.firstDepartId) {
        arr = this.$Utils.filterTreeToArr(
          this.departList,
          { departId: this.dataInfo.firstDepartId },
          "departId"
        );
      } else if (this.dataInfo.departId) {
        arr = this.$Utils.filterTreeToArr(
          this.departList,
          { departId: this.dataInfo.departId },
          "departId"
        );
      }
      this.departNames = arr.map(item => item.departName).join("-");
    },
    formatTimeUnit2(cell) {
      if (cell == 1) {
        return "分钟";
      } else if (cell == 2) {
        return "时";
      } else {
        return "";
      }
    },
    formatTimeUnit(val) {
      if (val == 1) return "分钟";
      if (val == 2) return "小时";
      if (val == 3) return "天";
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/operation/tagList" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.img-video {
  width: 550px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
.business-classify_name {
  ::v-deep p {
    display: inline;
    margin: 0;
    img {
      vertical-align: middle;
      height: 16px;
      width: auto;
    }
  }
}
</style>
